<template>
  <div class="collapseWrap">
    <div class="mapOrigin fl" v-if="showSourceCheck">
      <el-collapse  @change="handleChange">
        <el-collapse-item :class="{ activeTitle: isActive }" name="1">
          <template slot="title">
            源状态/类别选择
          </template>
          <div class="checkboxWrap">
            <div class="checkboxItem">
            <el-checkbox-group v-model="checkListGroup.checkList1" @change="handleChangeGroup1">
              <el-checkbox label="enterpriseOrigin">固定源</el-checkbox>
              <el-checkbox label="origin">移动源</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="checkboxItem">
            <el-checkbox-group v-model="checkListGroup.checkList2" @change="handleChangeGroup2">
              <el-checkbox :label="1">在库</el-checkbox>
              <el-checkbox :label="2">运输</el-checkbox>
              <el-checkbox :label="3">作业</el-checkbox>
              <el-checkbox :label="4">异常</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="checkboxItem">
            <el-checkbox-group v-model="checkListGroup.checkList3" @change="handleChangeGroup3">
                <el-checkbox label="036ca399-4447-4333-bc6d-9247a2aeee0d">Ⅰ类</el-checkbox>
                <el-checkbox label="6b8bd743-44b9-4e9c-b919-32541d50d890">Ⅱ类</el-checkbox>
                <el-checkbox label="5f995588-f35b-4db0-a3c8-4397ab594619">Ⅲ类</el-checkbox>
                <el-checkbox label="9c2c9035-b408-447b-b4a9-eb1a47e90433">Ⅳ类</el-checkbox>
                <el-checkbox label="419bd883-f484-4a49-99dc-2c6cacd43f53">Ⅴ类</el-checkbox>
            </el-checkbox-group>
          </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="mapLevel fr">
      <el-collapse @change="handleChange1">
        <el-collapse-item :class="{ activeTitle: isActive1, activeImg1: isActive1 }" name="2">
          <template slot="title">
            <div class="layerImg"></div>图层选择
          </template>
          <div class="checkboxItem">
            <el-checkbox-group v-model="checkListGroup.checkList4" style="display:flex;flex-direction: column;align-items:center;" @change="handleChangeGroup4">
              <el-checkbox label="enterprise__site">一企一档</el-checkbox>
              <el-checkbox label="origin__enterpriseOrigin">一源一档</el-checkbox>
              <el-checkbox label="person">一人一档</el-checkbox>
              <el-checkbox label="car">一车一档</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    checkListGroup: {
      type: Object,
      default: function() {
        return {
          checkList1: [],
          checkList2: [],
          checkList3: [],
          checkList4: []
        }
      }
    },
    width: {
      type: String,
      default: "200px"
    },
    heigth: {
      type: String,
      default: "150px"
    }
  },
  data() {
    return {
      isActive: false,
      isActive1: false,
      showSourceCheck: true,
    };
  },
  created() {},
  mounted() {
  },
  beforeDestroy() {},
  methods: {
    handleChange(val) {
      this.isActive = val.length ? true : false
    },
    handleChange1(val) {
      this.isActive1 = val.length ? true : false
    },
    handleChangeGroup1(value) {
      this.$emit("handleChangeCheckGroup",value,0)
    },
    handleChangeGroup2(value) {
      this.$emit("handleChangeCheckGroup",value,1)
    },
    handleChangeGroup3(value) {
      this.$emit("handleChangeCheckGroup",value,2)
    },
    handleChangeGroup4(value) {
      this.$emit("handleChangeCheckGroup",value,3)
    },
    openSource(){
      this.showSourceCheck = true;
    },
    closeSource(){
      this.showSourceCheck = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.collapseWrap {
  @include clearfix();
  width: 400px;

  .mapOrigin {
    width: 250px;
    // border: 1px solid #000;
    padding: 0 5px;

    .checkboxWrap{
      width: 250px;
      display: flex;
      .checkboxItem{
        &:nth-child(1){
          width: 80px;
        }
        &:nth-child(2){
          width: 70px;
        }
        &:nth-child(3){
          width: 100px;

        }
      }
    }
  }

  .mapLevel {
    width: 140px;
    margin-left: 2px;
    // border: 1px solid #000;

    .layerImg{
      width: 32px;
      height: 48px;
      background: url("../../../assets/info_images/layer1.png") no-repeat center center;
      background-size: 18px 18px;
    }
  }
}
</style>
<style lang="scss">
.collapseWrap {
  .el-collapse{
    box-shadow: 0 0px 5px rgba(0, 0, 0, .3);
    border-radius: 5px;
    .el-checkbox__label{
      font-size: 12px;
    }
  }
  .el-collapse-item__header{
    padding-left: 15px;
  }
  .mapOrigin{
    .el-collapse-item__wrap{
      padding-left: 15px;
    }
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border-left: 1px solid #e6ebf5;
    border-right: 1px solid #e6ebf5;

    .el-checkbox{
      margin-right: 10px;
    }
  }

  .activeTitle{
    color: #1890ff !important;

    .el-collapse-item__header{
      color: #1890ff !important;
    }
  }

  .activeImg1{
    .layerImg{
      background: url("../../../assets/info_images/layer2.png") no-repeat center center !important;
      background-size: 18px 18px!important;
    }
  }
  .el-collapse-item__header{
    color: #4a4a4a!important;
    height: 32px!important;
    line-height: 32px!important;
  }
  .el-checkbox__label{
    color: #4a4a4a!important;
    font-weight: normal;
  }
}
</style>
